<template>
	<view style="display: flex;flex-wrap: wrap;"
	:style="{
		'width': nodeModel.configDict.componentStyle.width+'rpx',
	    'background': nodeModel.configDict.componentStyle.background,
		'flex-direction': nodeModel.configDict.componentStyle.flex_direction,
		'justify-content': nodeModel.configDict.componentStyle.justify_content,
		'align-items': nodeModel.configDict.componentStyle.align_items,
		'flex-wrap': nodeModel.configDict.componentStyle.flex_wrap,
		'overflow-x': 'scroll',
		'marginTop': nodeModel.configDict.componentStyle.marginTop+'rpx',
		'marginBottom': nodeModel.configDict.componentStyle.marginBottom+'rpx',
		'marginLeft': nodeModel.configDict.componentStyle.marginLeft+'rpx',
		'marginRight': nodeModel.configDict.componentStyle.marginRight+'rpx',
		'paddingTop': nodeModel.configDict.componentStyle.paddingTop+'rpx',
		'paddingBottom': nodeModel.configDict.componentStyle.paddingBottom+'rpx',
		'paddingLeft': nodeModel.configDict.componentStyle.paddingLeft+'rpx',
		'paddingRight': nodeModel.configDict.componentStyle.paddingRight+'rpx'
		}">
		<view v-for="(item, index) in nodeModel.configDict.itemList" :key="index" @click="itemHandle(item)"
		style="display: flex;"
		:style="{
			'width': nodeModel.configDict.itemStyle.width+'rpx',
			'background': nodeModel.configDict.itemStyle.background,
			'flex-direction': nodeModel.configDict.itemStyle.flex_direction,
			'justify-content': nodeModel.configDict.itemStyle.justify_content,
			'align-items': nodeModel.configDict.itemStyle.align_items,
			'marginBottom': nodeModel.configDict.itemStyle.marginBottomForItem+'rpx',
			'marginLeft': nodeModel.configDict.itemStyle.marginLeftForItem+'rpx',
			'paddingTop': nodeModel.configDict.itemStyle.paddingTopForItem+'rpx',
			'paddingBottom': nodeModel.configDict.itemStyle.paddingBottomForItem+'rpx',
			'paddingLeft': nodeModel.configDict.itemStyle.paddingLeftForItem+'rpx',
		}">
			
			<view v-if="item.fileType=='video'">
				<video id="myVideo" :src="item.coverUrl" object-fit='cover' enable-danmu danmu-btn controls
				:style="{
					'width': nodeModel.configDict.itemStyle.widthForCover1+'rpx',
					'height': nodeModel.configDict.itemStyle.heightForCover1+'rpx'
				}"></video>
			</view>
			<view v-else>
				<u-image :width="nodeModel.configDict.itemStyle.widthForCover1+'rpx'" :height="nodeModel.configDict.itemStyle.heightForCover1+'rpx'" :radius="nodeModel.configDict.itemStyle.borderRadiusForCover1+'rpx'" :src="item.coverUrl" mode='aspectFill'></u-image>
			</view>
			<view v-if="nodeModel.configDict.itemStyle.isShowForText1 && item.text1" style="border: #007AFF00 1rpx solid;" :style="{
				'paddingTop': nodeModel.configDict.itemStyle.paddingTopForFlex2+'rpx',
				'paddingBottom': nodeModel.configDict.itemStyle.paddingBottomForFlex2+'rpx',
				'paddingLeft': nodeModel.configDict.itemStyle.paddingLeftForFlex2+'rpx',
				'paddingRight': nodeModel.configDict.itemStyle.paddingRightForFlex2+'rpx',
			}">
				<view v-if="nodeModel.configDict.itemStyle.isShowForText1 && item.text1" :style="{
					'marginTop': nodeModel.configDict.itemStyle.marginTopForText1+'rpx',
					'color': nodeModel.configDict.itemStyle.colorForText1,
					'font-size': nodeModel.configDict.itemStyle.fontsizeForText1 + 'rpx',
					'font-weight': nodeModel.configDict.itemStyle.fontweightForText1,
				}">{{item.text1}}</view>
				<view v-if="nodeModel.configDict.itemStyle.isShowForText2 && item.text2" :style="{
					'marginTop': nodeModel.configDict.itemStyle.marginTopForText2+'rpx',
					'color': nodeModel.configDict.itemStyle.colorForText2,
					'font-size': nodeModel.configDict.itemStyle.fontsizeForText2 + 'rpx',
					'font-weight': nodeModel.configDict.itemStyle.fontweightForText2,
				}">{{item.text2}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {count} from '@/common/utils/count.js'
	export default{
		name: 'jc-grid',
		props: {
			nodeModel: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
			}
		},
		methods:{
			itemHandle(e){
				this.$emit('itemHandle', e)
			}
		}
	}
</script>

<style>
</style>
